"use client"

import { useState } from "react"
import "./styles/navbar.css"
import LogoSvgUrl from "./assets/logo.svg";
import { Menu, X, ChevronRight } from "lucide-react"
import LanguageSwitcher from "../languageSwitcher";
// This component can be used in Astro files with client:load directive
export default function Navbar({
  logo = "tapo",
  menuItems = [],
  currentLanguage = "en",
  translations = {
    en: {
      search: "Search",
      language: "Language",
      menu: "Menu",
    },
    ar: {
      search: "بحث",
      language: "لغة",
      menu: "قائمة",
    },
  },
}) {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const pathName = location.pathname
  const currentActiveTab = menuItems.filter(menuItem => pathName.includes(menuItem.activeName))[0]?.activeName || "home"

  const t = translations[currentLanguage]
  const isRTL = currentLanguage === "ar"
  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen)
  }
  return (
    <header className={`navbar-container bg-white ${isRTL ? "rtl" : ""}`}>
      <div className="!px-2 md:px-4 py-1 md:py-0 flex justify-between max-w-5xl mx-auto">
        <button className="menu-toggle" onClick={() => setIsMenuOpen(!isMenuOpen)} aria-label={t.menu}>
          <Menu className="h-5 w-5" />
        </button>

        <a href={`/${currentLanguage}/`} className="logo w-24 md:w-36 h-auto">
          <img src={LogoSvgUrl} alt={logo} />
        </a>
        <nav className={`navbar-menu ${isMenuOpen ? "open1" : ""}`}>
          <ul className="menu-items">
            {menuItems.map((item, index) => (
              <li key={index} className="menu-item" >
                <a href={`/${currentLanguage}${item.url}`} className={item.activeName === currentActiveTab ? "active" : ""} >
                  {item[currentLanguage]}
                  <div></div>
                </a>
              </li>
            ))}
          </ul>
        </nav>
        <div className="navbar-actions">
          <LanguageSwitcher currentLanguage={currentLanguage} />
        </div>
      </div>


      {/* 菜单弹窗 */}
      <div
        className={`fixed inset-0 bg-black bg-opacity-50 z-20 transition-opacity duration-300 ${isMenuOpen ? "opacity-100" : "opacity-0 pointer-events-none"
          }`}
        onClick={toggleMenu}
      >
        <div
          className={`absolute top-0 left-0 right-0 bg-white transition-transform duration-300 ease-out transform origin-top ${isMenuOpen ? "translate-y-0" : "-translate-y-full"
            }`}
          onClick={(e) => e.stopPropagation()}
        >
          <div className="flex justify-between items-center p-2 py-3 border-b">
            <button onClick={toggleMenu} className="focus:outline-none" aria-label="关闭">
              <X className="h-6 w-6" />
            </button>
            <a href={`/${currentLanguage}/`} className="logo w-24 md:w-96">
              <img src={LogoSvgUrl} alt={logo} />
            </a>
            <div className="w-10" />
          </div>

          <nav>
            <ul>
              {menuItems.map((item, index) => (
                <li onClick={() => window.open(`/${currentLanguage}${item.url}`,"_self")} key={index} className="menu-item flex justify-between pr-2 items-center">
                  <a className={item.activeName === currentActiveTab ? "active" : ""}>
                    {item[currentLanguage]}
                  </a>
                  <ChevronRight className="h-4" />
                </li>
              ))}
            </ul>
          </nav>
        </div>
      </div>
    </header>
  )
}
